<template>
  <div
    style="
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    "
  >
    <div class="box">
      <div style="width: 100%; height: 50%; display: flex">
        <el-carousel>
          <el-carousel-item v-for="item in form.imgList" :key="item.id">
            <img :src="item" alt="" class="img" />
          </el-carousel-item>
        </el-carousel>
        <div style="width: 50%; height: 100%">
          <div class="shop">
            <span>{{ shop.brand }}</span>
            <span>{{ shop.shopnames }}</span>
            <span>{{ shop.types }}</span>
          </div>
          <div class="shop">
            <span style="color: red">¥: {{ shop.price }}</span>
            <span>销量: {{ shop.counts }}</span>
          </div>
          <div class="shop" style="height: 20%">
            <span>{{ shop.company }}</span>
          </div>
        </div>
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
        "
      >
        <el-input-number
          v-model="num"
          @change="handleChange"
          label="描述文字"
          :min="1"
          :max="99"
        ></el-input-number>
      </div>
      <div
        v-if="addressList.names != ''"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
        "
      >
        <span style="margin-right: 20px">默认收货地址</span>
        <span style="margin-right: 20px">收货人:{{ addressList.names }}</span>
        <span style="margin-right: 20px"
          >收货地址:{{ addressList.address }}</span
        >
        <span style="margin-right: 20px">联系电话:{{ addressList.phone }}</span>
        <span style="font-size: 12px; color: red"
          >(更改地址请到我的地址更改)</span
        >
      </div>
      <div
        v-if="addressList.names == ''"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
        "
      >
        <span style="font-size: 12px; color: red"
          >(没有收货地址请先添加地址)</span
        >
      </div>
      <div
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
        "
      >
        <el-button class="btn" type="primary" @click="buy">立即下单</el-button>
      </div>
      <div
        v-html="form.text"
        style="margin-right: 20px; margin-left: 20px"
      ></div>
      <div
        style="
          margin-right: 20px;
          margin-left: 20px;
          height: 190px;
          border: 1px solid #ccc;
          overflow-y: scroll;
        "
      >
        评价:
        <div
          v-for="(item, index) in evaluate"
          :key="index"
          style="margin-top: 10px; height: 20px; display: flex"
        >
          <!-- <el-rate :max="3" v-model="item.status" disabled></el-rate> -->
          <span style="margin-right: 20px">用户:{{ item.username }}</span>
          <span style="margin-right: 20px">评论:{{ item.comment }}</span>
          <span style="margin-right: 20px">商家回复:{{ item.answer }}</span>
          <span style="margin-right: 20px">时间:{{ item.times }}</span>
        </div>
      </div>
    </div>

    <el-dialog title="输入密码" :visible.sync="dialogVisible" width="20%">
      <el-input
        placeholder="请输入支付密码"
        v-model="buyForm.payword"
        class="input-with-select"
        show-password
      >
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="quitBuy">取 消</el-button>
        <el-button type="primary" @click="sureBuy">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  buyShop,
  getMyaddress,
  getShopDetail,
  getCommentById,
} from "@/api/login";
export default {
  // name: "KingsIndex",

  data() {
    return {
      shop: {
        imgs: "",
        brand: "",
        shopnames: "",
        types: "",
        price: "",
        counts: "",
        company: "",
        id: "",
      },
      buyForm: {
        imgurl: "",
        shopnames: "",
        price: "",
        counts: "",
        orderTime: "",
        total: "",
        username: "",
        payword: "",
        money: "",
      },
      num: 1,
      dialogVisible: false,
      username: localStorage.getItem("myname"),
      form: {},
      addressList: {
        names: "",
        address: "",
        phone: "",
      },
      evaluate: [],
      // status: 0,
    };
  },

  mounted() {
    // const item = JSON.parse(this.$route.params.item);
    const item = JSON.parse(this.$route.query.item);
    this.shop = item || {};
    getShopDetail({ id: item.id }).then((res) => {
      if (res.code == 200) {
        this.form = res.data || {};
      }
    });
    getMyaddress({ username: this.username }).then((res) => {
      if (res.code == 200) {
        let arr = [];
        arr = res.data.filter((res) => {
          return res.active == 1;
        });
        this.addressList.active = arr[0].active;
        this.addressList.address = arr[0].address;
        this.addressList.id = arr[0].id;
        this.addressList.names = arr[0].name;
        this.addressList.phone = arr[0].phone;
        this.addressList.username = arr[0].username;
      }
    });
    getCommentById({ type: 0, id: this.shop.id }).then((res) => {
      if (res.code == 200) {
        console.log(res);
        res.data.data.forEach((i) => {
          if (i.answer == null) {
            i.answer = "暂无回复";
          }
          i.status = Number(i.status);
        });
        this.evaluate = res.data.data || [];
      }
    });
  },

  methods: {
    handleChange(value) {
      this.num = value;
    },
    buy() {
      // 创建一个新的 Date 对象，它将包含当前时间
      var currentDate = new Date();
      // 提取年、月、日、小时、分钟和秒
      var year = currentDate.getFullYear();
      var month = ("0" + (currentDate.getMonth() + 1)).slice(-2); // 月份从0开始，所以要加1
      var day = ("0" + currentDate.getDate()).slice(-2);
      var hours = ("0" + currentDate.getHours()).slice(-2);
      var minutes = ("0" + currentDate.getMinutes()).slice(-2);
      var seconds = ("0" + currentDate.getSeconds()).slice(-2);

      // 构建日期时间字符串
      var formattedDateTime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      this.buyForm.username = this.username;
      this.buyForm.counts = this.num;
      this.buyForm.imgurl = this.shop.imgs;
      this.buyForm.price = this.shop.price;
      this.buyForm.shopnames = this.shop.shopnames;
      this.buyForm.total = this.num * this.shop.price;
      this.buyForm.money = this.num * this.shop.price;
      this.buyForm.orderTime = formattedDateTime;
      if (this.addressList.names == "") {
        this.$message.error("请添加收货地址");
      } else {
        this.dialogVisible = true;
      }
    },
    sureBuy() {
      if (this.buyForm.payword == "") {
        this.$message.error("请输入密码");
      } else {
        buyShop({ ...this.buyForm, ...this.addressList })
          .then((res) => {
            if (res.code == 200) {
              this.dialogVisible = false;
              this.buyForm.payword = "";
              this.$message({
                message: "下单成功",
                type: "success",
              });
              this.$router.push("/person");
            }
          })
          .catch((err) => {});
      }
    },
    quitBuy() {
      this.dialogVisible = false;
      this.buyForm.payword = "";
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 70vw;
  height: 90vh;
  border: 1px solid #000;
}
.img {
  width: 100%;
  height: 100%;
}
.shop {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 40%;
  font-size: 26px;
  color: #000;
}

::v-deep .el-input-number {
  width: 20vw;
}
.btn {
  width: 20vw;
}
::v-deep .el-carousel {
  width: 50%;
  height: 100%;
}

::v-deep .el-carousel__container {
  height: 100%;
}
</style>
